<template>
	<button class="ln-button" :class="props.type" @click="handleClick">
		<span>
			<slot />
		</span>
	</button>
</template>

<script lang="ts" setup>
import type { PropType } from 'vue';

const props = defineProps({
	type: {
		type: String as PropType<'default' | 'danger' | 'tertiary'>,
		default: 'default',
	},
});

const emit = defineEmits(['click']);
function handleClick(params) {
	emit('click', params);
}
</script>

<style lang="scss" scoped>
.ln-button {
	padding: 0;
	font-size: 12px;
	cursor: pointer;
	background-color: transparent;

	// color: v-bind(color);
	border: none;

	&::after {
		border: none;
		border-radius: 0;
		outline: none;
	}
}

.ln-button.default {
	color: #409eff;

	&:hover {
		span {
			border-bottom: 1px solid #409eff;
		}
	}
}

.ln-button.danger {
	color: #fd4c4c;

	&:hover {
		span {
			border-bottom: 1px solid #fd4c4c;
		}
	}
}

.ln-button.tertiary {
	position: relative;
	z-index: 0;
	height: 32px;
	padding: 0 1px;
	color: #4f8dff;
	background: linear-gradient(90deg, #1d6cfc 0%, #1d32fc 100%);
	border-radius: 4px;

	&::before {
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(to right, #1d32fc, #1d6cfc);
		border-radius: 3px;
		content: '';
		opacity: 0.5;
		transition: opacity 0.5s;
	}

	&:hover::before {
		opacity: 1;
	}

	span {
		display: block;
		height: 30px;
		padding: 0 20px;
		line-height: 30px;
		background-color: #343946;
		border-radius: 4px;
	}
}
</style>
